<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .parent{
            width: 400px;
            height: 200px;
            border: 2px solid gold;

        }

        .child{
            width: 350px;
            height: 80px;
            border: 2px solid blue;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="parent">
            <!-- {{msg}} -->
            <!-- event是我的一个事件，我传参就有数据 -->
            <child-com :msg="msg" @input1="msg=$event"></child-com>

            <child-com1 :msg="msg" @input1="msg=$event"></child-com1>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>
        // 单向数据流
        // 数据由父组件流向子组件
        // 子组件中不要直接修改父组件中的prop,会违背单向数据流的原理
        // 子组件中不要直接用v-model双向绑定父组件传来的props,相当于直接修改了父组件
        Vue.component("ChildCom",{
            // :value="msg"数据改变页面，msg变化，对应的页面也变化
            // @input="msg=$event.target.value"，页面改变数据，在页面是输入数据，然后赋值给msg

            // 子组件向父组件发送事件input1,发送的数据是input中输入的值，在标签中绑定input1事件，然后把值给到msg
            template: `<div class="child">
                            {{cmsg}}
                           
                       </div>`,
            props:["msg"], //props是响应式的
            // created(){
            //     this.msg = this.msg.toUpperCase();//错误的
            // }，

            // 会把一样的数据存在data里面一份
            data(){
                return{
                    //可以获取props中的数据,这种赋值只发生一次，在组件创建的过程中发生， 
                    // 创建结束之后， prop再发生变化 ，不会引起子组件本地数据的变化
                    // 后面props:["msg"]这个再变cmsg也不变了
                    cmsg: this.msg,//这个this就是props:["msg"] 
                }

            },
            created(){
                // 这个data里面的数据是可以改的
                this.cmsg = this.cmsg.toUpperCase();
            },
            // 解决只发生一次的问题，监听到props:["msg"]中的msg一变，就重新赋值
            watch: {
                msg(val){
                    this.cmsg = val.toUpperCase()
                }
            }

        })



        Vue.component("ChildCom1",{
          
            // 这个cmsg不用执行，vue内部已经帮我们写好了执行
            template: `<div class="child">
                            {{cmsg}}
                           
                       </div>`,
            props:["msg"], //props是响应式的
            // 会把一样的数据存在computed里面一份
            computed: {
                cmsg(){
                    return this.msg.toUpperCase();
                }
            }
        })


        var vm = new Vue({
            el: "#app",
            data: {
                msg: "Vue单向数据流"
            }
        })
    </script>
</body>
</html>